<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局组件</title>

</head>
<body>


<div id="app">
    <heima60 :show="flag" :users="us"></heima60>

</div>


<script src="../node_modules/vue/dist/vue.js"></script>
<script>

    //局部组件在注册为组件之前，并不知道自己是组件

    let heima60 = {
        template: `<div>
            我是黑马60

            <p v-if="show">
            我是子组件heima60，中的段落标签
</p>

    <ul>
        <li v-for="(user,index) in users" :key="index">
            {{user.name}}--{{user.age}}
</li>


</ul>

        </div>`,
        props: {
            show: {
                type: Boolean,
                default: false
            },
            users:{
                type: Array,
            }
        }

    };

    let app = new Vue({
        el: "#app",
        components: {
            heima60
        },
        data: {
            flag: true,
            us:[
                {
                    name:"刘德华01",
                    age:50
                },
                {
                    name:"刘德华02",
                    age:51
                },{
                    name:"刘德华03",
                    age:59
                }
            ]
        }
    });
</script>
</body>
</html>